<template>
  <li
      :class="[
      'menu-item',
      { 'has-children': item.children },
      { 'active': isActive }
    ]"
      @click.stop="handleClick"
  >
    <div class="menu-item-content" :style="{ paddingLeft: depth * 15 + 20 + 'px' }">
      <i :class="item.icon"></i>
      <span>{{ item.title }}</span>
      <i
          v-if="item.children"
          class="el-icon-arrow-down arrow"
          :class="{ 'rotate': isOpen }"
      ></i>
    </div>
    <ul v-if="item.children && isOpen" class="sub-menu">
      <menu-item
          v-for="(child, index) in item.children"
          :key="index"
          :item="child"
          :depth="depth + 1"
          @select="$emit('select', $event)"
      ></menu-item>
    </ul>
  </li>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    item: {
      type: Object,
      required: true
    },
    depth: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    isActive() {
      return this.$parent.$parent.activePath === this.item.path
    }
  },
  methods: {
    handleClick() {
      if (this.item.children) {
        this.isOpen = !this.isOpen
      } else {
        this.$emit('select', this.item.path)
      }
    }
  }
}
</script>

<style scoped>
.menu-item {
  cursor: pointer;
  transition: all 0.3s;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-item.active {
  background: #409EFF;
}

.menu-item-content {
  display: flex;
  align-items: center;
  padding: 15px 20px;
}

.menu-item i {
  margin-right: 10px;
  font-size: 18px;
}

.arrow {
  margin-left: auto;
  transition: transform 0.3s;
}

.arrow.rotate {
  transform: rotate(180deg);
}

.sub-menu {
  list-style: none;
  padding-left: 0;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s;
}
</style>
